<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>料框</title>
</head>
<body>
<section>
    <div>
        <div class="layui-card">
            <div class="layui-card-body">
                <div>
                    <button type="button" class="layui-btn" id="test1">
                        <i class="layui-icon">&#xe67c;</i>excel导入
                    </button>
                    <button ADP_BTN method="addEntity"><i class="layui-icon layui-icon-add-circle-fine"></i>增加</button>
                    <button adp_btn method="deleteAllEntity"><i class="layui-icon layui-icon-close"></i>删除</button>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="adp-content">
                <form id="queryForm"></form>
                <table id="queryTable"></table>
            </div>
        </div>
    </div>
</section>
<div style="width: 600px;display: none;" id="mergeFormDiv">
    <form action="" method="post" id="mergeForm" class="adp-center"></form>
</div>
</body>
</html>
<script src="../static/adp/import.js"></script>

<script type="text/html" id="OPERATION_ROW_TPL">
    <a class="layui-btn layui-btn-sm" lay-event="edit"> <i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del"><i
            class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<!--<script type="text/html" id="USER_ROLE_TPL">-->
<!--{{# layui.each(d.roles, function(index, item){ }}-->
<!--<span class="layui-badge layui-bg-blue">{{= item.roleName}}</span>-->
<!--{{# }); }}-->
<!--</script>-->

<script type="text/javascript">
    var queryform = $("#queryForm").adpForm({
        elem: [{type: "text", label: "料框编号", name: "containerId", placeholder: "请输入关键字"},
            {type: "text", label: "发行人", name: "issuePerson", placeholder: "请输入关键字"},
            {type: "date", label: "发行日期从", name: "startDate", placeholder: "请输入关键字"},
            {type: "date", label: "至", name: "endDate", placeholder: "请输入关键字"},
            {
                type: "select", label: "料框状态", name: "statusVo", placeholder: "请选择状态",
                data: [{key: 8, value: "所有"}, {key: "0", value: "初始空闲"}, {key: 1, value: "空框待用"},
                    {key: 2, value: "待入库"}, {key: 3, value: "在库"}, {key: 4, value: "待返工"},
                    {key: 5, value: "待出库"}, {key: 6, value: "已出库"}]
            }],
        button: [{type: "submit", label: "查询", method: "query", icon: 'query'}, {type: "reset", label: "重置"}],
        methods: {
            query: function query(data) {
                queryTable.reload(setStatus());
            }
        }
    });
    var mergeForm = $("#mergeForm").adpForm({
        layout: 'vertical',
        elem: [
            {type: "text", label: "料框编号", name: "containerId", verify: "required", placeholder: "请输入内容"},
            {type: "text", label: "发行人", name: "issuePerson", verify: "required", placeholder: "请输入内容"},
            {type: "date", label: "日期", name: "issueDate", format: 'yyyy-MM-dd HH:mm:ss', istime: 'true'},
            {type: "hidden", name: "id"}
        ],
        button: [
            {type: "submit", label: "保存", method: "submit"},
            {type: "reset", label: "重置"}
        ],
        methods: {
            submit: function submit(data) {
                SV("Container")("save")(data);
                $("#mergeFormDiv").close();
                queryTable.reload(setStatus());
            }
        }

    });

    var queryTable = $("#queryTable").adpTable({
        url: '../rs/Container/list',
        where: setStatus(),
        cols: [[
            {field: 'id', title: 'ID', type: 'checkbox', width: 30, sort: true, fixed: 'left'},
            {field: 'containerId', title: '料框编号', width: 180},
            {field: 'status', title: '料框状态', width: 180},
            {field: 'material', title: '图号', width: 200},
            {field: 'count', title: '数量', width: 100},
            {field: 'containerType', title: '料框类型', width: 180},
            // {field: 'issuePerson', title: '发行人', width: 180},
            // {field: 'issueDate', title: '发行时间', width: 180},
            {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#OPERATION_ROW_TPL'}
        ]],
        methods: {
            edit: function edit(data, tr) {
                $("#mergeFormDiv").open("编辑料框");
                mergeForm.reset();
                mergeForm.data(data);
            },
            del: function del(data, tr) {
                layer.confirm('真的删除行么', function (index) {
                    SV("Container")("delete")({ids: [data.id]});
                    queryTable.reload(setStatus());
                    layer.close(index);
                });
            }
        }
    });

    function addEntity() {
        return $("#mergeFormDiv").open("添加料框", {
            success: function success() {
                return mergeForm.reset();
            }
        });
    };

    function deleteAllEntity(arr) {
        var _queryTable$checkStat = queryTable.checkStatus(),
            data = _queryTable$checkStat.data;
        var ids = new Array();
        $.each(data, function (n, value) {
            ids.push(value.id);
        });
        layer.confirm('真的删除行么', function (index) {
            Deferred("Container")("delete")({
                "ids": ids
            }).then(function () {
                queryTable.reload(queryform.data());
                layer.close(index);
            });
        });
    };

    function setStatus() {
        var para = queryform.data();
        if (8 == para.statusVo) {
            para.statusVo = null;
        }
        return para;
    }

    layui.use('upload', function () {
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            , exts: 'xls'
            , url: '../rs/Container/importByExcel/upload' //上传接口
            , done: function (res) {
                //上传完毕回调
                layer.confirm(res.msg);
                queryTable.reload(setStatus());
            }
            , error: function () {
                //请求异常回调
            }
        });
    });
</script>